<!--
 * @Author: your name
 * @Date: 2021-08-09 15:11:41
 * @LastEditTime: 2021-08-09 15:25:26
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day06\06-display.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        body>p{
            /* 把块级元素变成行内元素，但是原本的块级元素样式还是存在，但是现在不能被指定宽高 */
            display:inline;
            /* 无效 */
            height:100px;
        }
        body>span{
            /* 把行内元素变成块级元素 */
            display: block;
            height:100px;
        }
        ul>li{
            /* 行内块级元素 ：在同一行中，还能进行宽高指定*/
            display:inline-block;
            height:40px;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <p>段落1</p>
    <p>默认：段落 margin-top margin-bottom</p>
    <p>段落2</p>
    <span>无意义的行内元素</span><span>共享一行</span><span>默认没有任何效果</span>
    <ul>
        <li>
            我的
            <img src="" alt="">
            <div>
                <ol>二级菜单</ol>
            </div>
            
        </li>
        <li>退出</li>
        <li>首页</li>
    </ul>
</body>
</html>